<template>
  <div
    style="
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    "
    class="login-bg"
  >
    <h1 style="color: #67c23a">正在登录中...</h1>
  </div>
</template>

<script lang="ts" setup>
import { useOidcStore } from "@/store/oidc";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ElLoading } from "element-plus";

// 开始加载
const loading = ElLoading.service({
  lock: true,
  text: "Loading",
  background: "rgba(0, 0, 0, 0.7)",
});

let oidc = useOidcStore();
let router = useRouter();

oidc
  .signinRedirectCallbackAsync()
  .then(() => {
    ElMessage.success("登录成功");
    router.push("/").then((response) => {
      loading.close();
    });
  })
  .catch((error) => {
    // 登录错误，跳转 404
    console.log(error);
    loading.close();
    router.push("/404");
  });
</script>

<style scope>
.login-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(../../assets/img/login-bg.jpg) center/cover no-repeat;
}
</style>
